<template>
    <div class="LoginContainer">
      <div class="glass-effect">
        <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
          <el-form :model="user" style="width: 80%;" :rules="rules" ref="LoginRef">
            <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px;">
              欢迎登录AI开放平台
            </div>
            <el-form-item prop="username">
              <el-input size="large" placeholder="请输入账号" v-model="user.username">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input size="large" placeholder="请输入密码" v-model="user.password" show-password>
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item >
                <div style="display: flex;width: 65%;" >
                    <el-input size="large" placeholder="请输入验证码" v-model="user.password" show-password>
                        <template #prefix>
                          <el-icon><Check /></el-icon>
                        </template>
                    </el-input>
                </div>
                <div style="width: 31%; margin-left: 2%;margin-top: 3%;">
                  <img :src="captchaUrl" @click="updateCaptcha" style="flex: 1; cursor: pointer;" />
                </div>
             
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="Login">登录</el-button>
            </el-form-item>
            <div style="display: flex;">
              <div style="flex: 1;">
                还没有账号?<span style="color: #409EFF; cursor: pointer;" @click="ChangeRegister">注册</span>
              </div>
              <div style="flex: 1; text-align: right;">忘记密码</div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
<script setup>
  import { reactive, ref } from "vue";
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const LoginRef = ref(null);
  const user = reactive({
    username: '',
    password: ''
  });
  var captchaUrl=ref("http://localhost:8080/captcha")
  function updateCaptcha(){
    captchaUrl.value = "http://localhost:8080/captcha?time=" + new Date().getTime();
}
  const rules = reactive({
    username: [
      { required: true, message: '请输入账户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    
  });
  
  async function Login() {
    LoginRef.value.validate(async (valid) => {
      if (valid) {
        ElMessage.success("登录成功");
        setTimeout(() => {
          router.push("home");
        }, 1000);
      } else {
        ElMessage.error('数据输入不合法');
      }
    });
  }
  
  const ChangeRegister = () => {
    router.push("register");
  };
  </script>
  
<style>
  .LoginContainer {
    height: 100vh;
    background-image: url("https://1.bp.blogspot.com/-1jq9R-na21U/Xwhip410sFI/AAAAAAAAAAY/fLO-FzWFlU8eKiCA5-IWAR22YoC1mM8-QCLcBGAsYHQ/s2048/real-ai.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #464646;
  }
  
  .glass-effect {
    display: flex;
    background-color: rgba(255, 255, 255, 0.1);
    width: 25%;
    height: 50%;
    border-radius: 5px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
</style>
  



  